<template>
  <div class="flexrow">
    <div>
      <el-select
        v-model="first_val"
        :disabled="disabled"
        filterable
        placeholder="请选择"
        @change="handleChange"
      >
        <el-option
          v-for="(item, index) in first_opt"
          :key="index"
          :label="item.value"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <el-select
        v-model="second_val"
        :disabled="disabled"
        filterable
        placeholder="请选择"
        @change="secondChange"
      >
        <el-option
          v-for="item in second_opt"
          :key="item.value"
          :label="item.value"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <el-select
        v-model="three_val"
        :disabled="disabled"
        filterable
        placeholder="请选择"
        @change="threeChange"
      >
        <el-option
          v-for="item in three_opt"
          :key="item.value"
          :label="item.value"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
export default {
  name: "LevelSelect",
  props: {
    editVal: {
      //控制回显
      type: String
    },
    formType: {
      //判断数据类型 目前是行业跟专业
      type: String
    },
    valHan: {
      //数据处理连接符 不设置默认以|分割数据
      type: String,
      default: "|"
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      // 联动数据
      type: String,
      request: true
    }
  },
  data() {
    return {
      first_opt: [], //一级菜单
      first_val: "", //一级菜单选中值
      second_opt: [], //二级菜单
      second_val: "", //二级菜单选中值
      three_opt: [], //三级菜单
      three_val: "", //三级菜单选中值

      firstArr: [], //一级菜单源数据
      secondArr: [], //二级菜单源数据
      threeArr: [], // 三级菜单源数据
      editShow: false, //控制回显时的编辑联动效果清理
      arr: [],
      first_num: 0,
      second_num: 0
    };
  },
  async created() {
    await this.getPaymentTypeDicList();
    //获取数据渲染
    if (this.editVal) {
      //回显处理
      this.initEditVal();
    }
  },
  watch: {
    editVal() {
      this.initEditVal();
    },
    value() {
      this.getPaymentTypeDicList();
    }
  },
  methods: {
    async getPaymentTypeDicList() {
      const valList = JSON.parse(this.value);
      this.first_opt = valList;
    },
    initEditVal() {
      this.editShow = true;
      let val = "";
      try {
        val = JSON.parse(this.editVal);
      } catch (error) {
        val = this.editVal.split("|");
      }
      if (!val) return;
      if (typeof val == 'number') {
        val = [val]
      }
      let first = "";
      let second = "";
      let three = "";
      for (let i = 0; i < this.first_opt.length; i++) {
        //筛选对应值
        const i_obj = this.first_opt[i];
        if (i_obj.value == val[0]) {
          first = i_obj.value;
          this.second_opt = this.first_opt[i].children;
        }
      }
      for (let i = 0; i < this.second_opt.length; i++) {
        //筛选对应值
        const i_obj = this.second_opt[i];
        if (i_obj.value == val[1]) {
          second = i_obj.value;
          this.three_opt = this.second_opt[i].children;
        }
      }

      for (let i = 0; i < this.three_opt.length; i++) {
        //筛选对应值
        const i_obj = this.three_opt[i];
        if (i_obj.value == val[2]) {
          three = i_obj.value;
        }
      }
      this.first_val = first;
      this.second_val = second;
      this.three_val = three;
      return;
    },
    handleChange(e) {
      this.second_opt = [];
      this.second_val = "";
      this.three_opt = [];
      this.three_val = "";
      this.first_opt.forEach((item, index) => {
        if (item.value == this.first_val) {
          this.first_num = index;
          this.second_opt.push(...this.first_opt[this.first_num].children);
        }
      });
      let val = this.first_val;
      this.$emit("stage", val);
    },
    secondChange(e) {
      this.three_opt = [];
      this.three_val = "";
      this.second_opt.forEach((item, index) => {
        if (item.value == this.second_val) {
          this.second_num = index;
          this.three_opt.push(...this.second_opt[this.second_num].children);
        }
      });
      let val = this.first_val + this.valHan + this.second_val;
      this.$emit("stage", val);
    },
    threeChange(e) {
      let val =
        this.first_val +
        this.valHan +
        this.second_val +
        this.valHan +
        this.three_val;
      this.$emit("stage", val);
    },
    //处理数据结果，多个|分割数据时，处理成两个
    handleData(val) {
      if (val.length > 2) {
        const len = val.length;
        const v = val[len - 1];
        var _arr = val;
        _arr.length = len - 1;
        let n_arr = [];
        n_arr.push(_arr.join("|"));
        n_arr.push(v);
        val = n_arr;
      }
      return val;
    }
  }
};
</script>
<style scoped lang="scss">
.flexrow {
  display: flex;
  flex-direction: row;
  > div {
    margin-right: 8px;
  }
  > div:last-child {
    margin-right: 0;
  }
}
</style>
